import { useHistory } from "react-router-dom";
import { getAllBook } from "../axios/api";
import React, { useState, useRef, useEffect } from "react";
import { ProgressBar, Popup } from "antd-mobile";
import style from "../assets/css/detail.module.scss";

const Reading = () => {
  const [data, setData] = useState({});

  const history = useHistory();
  const [percent, setPercent] = useState(0);
  const [percento, setPercento] = useState(0);
  const [percentt, setPercentt] = useState(0);
  const [visible1, setVisible1] = useState(false);

  const id = history.location.state.id;
  const bdy = useRef();
  const bdyt = useRef();
  const bdys = useRef();
  console.log(id);

  useEffect(async () => {
    const detalibook = await getAllBook(null, null, null, id);
    console.log(detalibook.data.data[0]);
    setData(detalibook.data.data[0]);

    setPercent(detalibook.data.data[0].recommended * 1);
    setPercento(detalibook.data.data[0].general * 1);
    setPercentt(detalibook.data.data[0].no * 1);
  }, []);

  return (
    <div className={style.main}>
      {/* 头部 */}
      <div className={style.head}>
        <div>
          <i
            className="iconfont icon-xiangzuo1"
            onClick={() => {
              history.goBack();
            }}
          ></i>
        </div>
        <div>
          <i className="iconfont icon-yuedu"></i>
          <i className="iconfont icon-gouwuche"></i>
          <i className="iconfont icon-wode"></i>
          <i className="iconfont icon-31zhuanfa"></i>
          <i
            className="iconfont icon-diandiandianshu"
            onClick={() => {
              setVisible1(true);
            }}
          ></i>
          <Popup
            visible={visible1}
            bodyStyle={{ padding: '20PX' }}
            onMaskClick={() => {
              setVisible1(false);
            }}
         
          >
            <div className={style.frist}>
              <div>
                <i className="iconfont icon-shujia"></i>
                <p>私密阅读</p>
              </div>

              <div>
                <i className="iconfont icon-yunxiazai_o"></i>
                <p>下载到本地</p>
              </div>

              <div>
                <i className="iconfont icon-shujia1"></i>
                <p>添加到书单</p>
              </div>
            </div>
            <div className={style.frist}>
              <div>
                <i className="iconfont icon-shujia"></i>
                <p>私密阅读</p>
              </div>

              <div>
                <i className="iconfont icon-yunxiazai_o"></i>
                <p>下载到本地</p>
              </div>

              <div>
                <i className="iconfont icon-shujia1"></i>
                <p>添加到书单</p>
              </div>
            </div>
          </Popup>
        </div>
      </div>
      {/* body */}
      <div className={style.body}>
        {/* 图片展示 */}
        <div className={style.see}>
          <div className={style.img}>
            <img src={data.cover} />
          </div>
          <h2>{data.name}</h2>
          <p>{data.wirter}</p>
        </div>
        {/* 推荐 */}
        <div className={style.recommend}>
          <div>
            <span>微信读书推荐值</span>
            <span>{data.recommended}%</span>
          </div>

          <div>
            <div className={style.left}>
              <h2>{data.recommended >= 80 ? "好评如潮" : "一般"}</h2>
              <p>{data.humnum}万人点评 </p>
            </div>
            <div className={style.right}>
              <div>
                <p>推荐</p>
                <ProgressBar
                  percent={percent}
                  style={{
                    "--track-width": "10px",
                  }}
                />
              </div>

              <div>
                <p>一般</p>
                <ProgressBar
                  percent={percento}
                  style={{
                    "--track-width": "10px",
                  }}
                />
              </div>

              <div>
                <p>不行</p>
                <ProgressBar
                  percent={percentt}
                  style={{
                    "--track-width": "10px",
                  }}
                />
              </div>
            </div>
          </div>

          <div className={style.bottom}>
            {/* <div>
                       
                        <Button
                            color='primary'
                             disabled={percent === 100}
                             onClick={() => {
                              setPercent(pre => pre + 1)
                                  }}
                            style={{ marginRight: '8px' }}
                                 >
                             推荐
                       </Button>
                       
                   <div>
                        <i className="iconfont icon-yiban"></i>
                   <Button
                            color='primary'
                             disabled={percent === 100}
                             onClick={() => {
                              setPercent(pre => pre + 1)
                                  }}
                            style={{ marginRight: '8px' }}
                                 >
                           一般
                       </Button>
                   </div>
                       
                       <Button
                            color='primary'
                             disabled={percent === 100}
                             onClick={() => {
                              setPercent(pre => pre + 1)
                                  }}
                            style={{ marginRight: '8px' }}
                                 >
                             不行
                       </Button>
                    </div> */}
            <div>
              <i className="iconfont icon-yiban"></i>
              <button
                ref={bdy}
                color="primary"
                disabled={percent === 100}
                onClick={(e) => {
                  setPercent((pre) => pre + 10);
                  bdyt.current.disabled = "true";
                  e.target.disabled = "true";
                  bdys.current.disabled = "true";
                  bdyt.current.style.cssText =
                    "background-color:#efeef4;color:black";
                  bdys.current.style.cssText =
                    "background-color:#efeef4;color:black";
                }}
                style={{ marginRight: "8px" }}
              >
                推荐
              </button>
            </div>
            <div>
              <i className="iconfont icon-yiban"></i>
              <button
                ref={bdyt}
                color="primary"
                disabled={percento === 100}
                onClick={(e) => {
                  setPercento((pre) => {
                    return pre + 10;
                  });
                  bdy.current.disabled = "true";
                  e.target.disabled = "true";
                  bdys.current.disabled = "true";
                  bdy.current.style.cssText =
                    "background-color:#efeef4;color:black";
                  bdys.current.style.cssText =
                    "background-color:#efeef4;color:black";
                }}
                style={{ marginRight: "8px" }}
              >
                一般
              </button>
            </div>
            <div>
              <i className="iconfont icon-yiban"></i>
              <button
                ref={bdys}
                color="primary"
                disabled={percentt === 100}
                onClick={(e) => {
                  setPercentt((pre) => pre + 10);
                  bdy.current.disabled = "true";
                  e.target.disabled = "true";
                  bdyt.current.disabled = "true";
                  //   bdy.current.style.background="#efeef4"
                  //   bdy.current.style.color="white"
                  bdy.current.style.cssText =
                    "background-color:#efeef4;color:black";
                  bdyt.current.style.cssText =
                    "background-color:#efeef4;color:black";
                }}
                style={{ marginRight: "8px" }}
              >
                不行
              </button>
            </div>
          </div>

          {/* 阅读数量 */}
          <div className={style.reading}>
            <div className={style.one}>
              <p>阅读</p>
              <p>
                <span>{data.readnum}</span>
                <span>万人</span>
              </p>
              <p>阅读此书</p>
            </div>
            <div className={style.two}>
              <p>字数</p>
              <p>
                <span>{data.wrodnum}</span>
                <span>万字</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      {/* 底部 */}
      <div className={style.foot}>
        <div>
          <i className="iconfont icon-shezhi"></i>
          <i className="iconfont icon-faxian"></i>
          <i className="iconfont icon-weixuanzhongyuanquan"></i>
          <i className="iconfont icon-taiyang"></i>
          <i className="iconfont icon-ziti"></i>
        </div>
      </div>
    </div>
  );
};

export default Reading;
